<template>
	<div class="page animate__animated" :style="{backgroundImage:'url('+bg+')'}" :class="[fadeOut ? 'animate__fadeOut' : '']" @animationend="onPageOut">
		<!--图片-->
		<img class="firstImg" :src='imgUrl' :style="{ transform: 'translateY(-50%) scale(' + imgScale + ')' }" @animationend="amplifier" />
		<!--文字-->
		<div class="text" v-if="showText">
			<p>“性侵不是小概率事件”</p>
			<p style="text-align: right">“儿童性教育早该普及了”</p>
		</div>
	</div>
	<div @click="endThis" class="animate__animated animate__pulse animate__infinite skip" :class="[fadeOut ? 'animate__fadeOut' : '']">SKIP</div>
</template>
<script setup>
import { ref } from "vue";
const imgUrl='./img/首图.jpg'
const bg='./img/bg.jpg'
const props = defineProps({
	show: {
		type: Boolean,
		default: false,
	},
});
const emits = defineEmits(["update:show"]);
const imgScale = ref(1);
const fadeOut = ref(false);
//图片放大
const amplifier = () => {
	imgScale.value = 15;
	setTimeout(() => {
		showTextFunc();
	}, 3000);
};
//文字逐行显示
const showText = ref(false);
const showTextFunc = () => {
	showText.value = true;
	setTimeout(() => {
		fadeOut.value = true;
	}, 8100);
};
//整个场景淡出之后 对外抛出
const onPageOut = () => {
	if (showText.value && fadeOut.value) {
		console.log("开场动画结束");
		emits("update:show", true);
	}
};
const endThis = () => {
	console.log("手动跳过开场动画");
	emits("update:show", true);
};
</script>
<style scoped>
.skip {
	position: absolute;
	bottom: 20px;
	right: 20px;
	color: white;
	font-size: medium;
	font-weight: bolder;
	font-size: 2.6rem;
	z-index: 999;
}
.page {
	background-color: #3a3a3a;
	width: 100%;
	height: 100%;
  position: relative;
  overflow: hidden;
}
.firstImg {
	width: 100%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	animation: firstImg 5s linear;
	right: 0;
	max-width: unset;
	transition: all 8s;
}
@keyframes firstImg {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}
.text {
	width: 90%;
	margin: 0 auto;
	transform: translateY(17vh);
	font-size: 1.7rem;
	font-weight: bolder;
	color: transparent;
	-webkit-text-fill-color: #ffffff;
	-webkit-text-stroke: 1px #f1b6b4;
	font-style: italic;
	overflow: hidden;
	animation: text 8s linear;
	height: 8rem;
}
.text :last-child {
	margin-top: 2rem;
}
@keyframes text {
	0% {
		height: 0;
	}
	100% {
		height: 8rem;
	}
}
</style>
